<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org"
      layout:decorator="layout/m_master">

<div layout:fragment="content">

    <link rel="stylesheet" href="/m/css/bottlecms-moment-page.css">
    <input type="hidden" name="orderBy" id="orderBy" th:value="${orderBy}">
    <div class="page-group">
        <div class="page page_moment_index">
            <header class="head-nav-wrap">
                <div class="headnav">
                    <div class="bcnav">
                        <a th:class="${orderBy eq null or orderBy eq ''?'item active':'item'}" page-id="moment_index"
                           href="/m/moment">推荐</a>
                        <a th:class="${orderBy eq 'friend'?'item active':'item'}" page-id="moment_friend"
                           href="/m/moment/friend">好友</a>
                        <a th:class="${orderBy eq 'me'?'item active':'item'}" page-id="moment_me"
                           href="/m/moment/me">我的</a>
                    </div>
                    <div class="right">
                        <div class="meun" data-toggle="topmenu"><i class="icon-bottlecms-01"></i><u>菜单</u></div>
                        <div class="create"><a data-toggle="create-menu" href="javascript:;"><i
                                class="icon-bottlecms-94"></i></a>
                            <ul class="dropdown-menu create-menu">
                                <li class="li"><a
                                        href="/m/moment/create?media_type=image">发图片</a></li>
                                <li class="li"><a
                                        href="/m/moment/create?media_type=video">发视频</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </header>

            <!--s: 底部导航 -->
            <!--e: 底部导航 -->
            <div class="page-content infinite-scroll">
                <div class="headbox" th:if="${slide ne null}">
                    <figure class="bcui-carousel moment_banner">
                        <ul class="sw-slides">
                            <li class="sw-slide" th:each="item:${slide}">
                                <a class="pic" th:href="${item.url}">
                                    <img th:alt="${item.title}"
                                         th:src="${item.img}+'_800x800.jpg'"/>
                                </a>
                            </li>
                        </ul>
                    </figure>
<!--                    <div class="bcui-btnnav">-->
<!--                        <a class="item active" href="?">-->
<!--                            全部-->
<!--                        </a>-->
<!--                        <a class="item " href="?topic=新人报道">-->
<!--                            #新人报道#-->
<!--                        </a>-->
<!--                        <a class="item " href="?topic=内心独白">-->
<!--                            #内心独白#-->
<!--                        </a>-->
<!--                        <a class="item " href="?topic=晒照片">-->
<!--                            #晒照片#-->
<!--                        </a>-->

<!--                    </div>-->
                </div>
                <div class="bcui-infinite" pages-src="/m/ajax/moment/list" pages-current="1">
                    <div class="bcui-infinite-list moments_list">

                    </div>
                    <div class="bcui-infinite-preloader" status="more">
                        <div class="bcui-flow-more"><font>加载更多</font></div>
                        <div class="bcui-flow-loading"></div>
                        <div class="bcui-flow-end"><font>没有了～</font></div>
                        <div class="bcui-flow-nothing"><font>没有找到相关数据！</font></div>
                    </div>
                </div>

                <div th:if="${!isVip and orderBy eq 'friend'}">
                    <div th:replace="layout/m_layout::vip"></div>
                </div>
            </div>
        </div>
    </div>
    <div th:replace="layout/m_layout::m_top_menu"></div>
    <div th:replace="layout/m_layout::systemJs"></div>
    <link href="/m/css/photoswipe.css" rel="stylesheet">
    <link href="/m/css/default-skin/default-skin.css" rel="stylesheet">
    <script src="/m/js/photoswipe.min.js" type="text/javascript"></script>
    <script src="/m/js/photoswipe-ui-default.min.js" type="text/javascript"></script>
    <script id="javascript-bottlecms-moment-page" type='text/javascript'
            src="/m/js/moment/bottlecms-moment-page.js"></script>
    <script type="text/javascript" src="/m/js/moment/index.js"></script>
</div>
</html>
